﻿var disDetDoc =
    '<div class="materialItem">' +
	'<div class="doc-img"><img src="resources/images/detdoc_img.png" width="40" height="40"></div>' +
        '<div class="list-deti">' +
            '<span class="list-izq">{Posicion}&nbsp;&nbsp;&nbsp;{CodigoMaterial}</span>' +
			'<br />' +
			'{Material}' + 
			'<br />' +
			'<span class="list-izq">{Lote} - {CentroAlmacen}</span>' +
        '</div>' +
		'<div class="list-detc">' +
            '<span class="list-izq">{Cantidad}&nbsp;{UnidadMedida}&nbsp;&nbsp;&nbsp;F. Reparto:&nbsp;{FechaReparto}&nbsp;&nbsp;&nbsp;{CantidadConf}</span>'+
        '</div>' +
        '<div class="list-detd">' +
            '<span>F. Conf:&nbsp;{FConf}&nbsp;&nbsp;&nbsp;{Total}&nbsp;&nbsp;&nbsp;{MotivoRechazo}</span>' + 
        '</div>' +
    '</div>';
    
detalleDocumento = Ext.extend(Ext.Panel, 
{
	layout: 'card',
	initComponent: function() 
	{
	    var sto = this.record.data.Detalle;
	    console.log(this.record.data.Detalle);
	    //convertimos el recor.data.detalle a un store valido
	    var usersStore = new Ext.data.Store({
            model: 'listaDocumentoDetalleModel',
            storeId: 'usersStore',
            store: sto,
            data: sto
        });
        
		this.listaDet = new Ext.List(
		{
			itemTpl: disDetDoc,
			store: usersStore
        });
		
		this.detalleDocPanel = new Ext.Panel(
        {
        	layout: 'card',
			fullscreen: true,
			dockedItems: [
        	{
        		xtype: 'toolbar',
				title: 'Detalle Documento',
            	dock: 'top',
        		items: [
        		{
					ui: 'back',
        			text: 'Volver',
					iconCls: 'reply',
					iconMask: true,
        			scope: this,
        			handler: function()
        			{
        				this.ownerCt.setActiveItem(this.prevCard,
        				{
        					type: 'slide',
        					reverse: true,
        					scope: this,
        					after: function()
        					{
        						this.destroy();
        					}
        				});
        			}
        		},
				{
					xtype: 'spacer'
				},
				{
					ui: 'confirm',
					text: 'Ver',
					iconCls: 'action',
					iconMask: true,
					handler: function()
					{
						window.open("documento.html","_self");
					}
				}]
			},
			{
				xtype: 'toolbar',
				dock: 'bottom',
				ui: 'light',
				defaults: {
					iconMask: true
				},
				items: [{
					xtype: 'spacer'
				},
				{
					xtype: 'button',
					iconCls: 'compose',
					text: 'Modificar',
					handler: function()
					{
						window.open("documento.html","_self");
					}
				},
				{
					xtype: 'spacer'
				},
				{
					xtype: 'button',
					iconCls: 'search',
					text: 'Visualizar',
					handler: function()
					{
						window.open("documento.html","_self");
					}
				},
				{
					xtype: 'spacer'
				},
				{
					xtype: 'button',
					iconCls: 'refresh',
					text: 'Flujo',
					handler: function()
					{
						window.open("flujo.html","_self");
					}
				},
				{
					xtype: 'spacer'
				},
				{
					xtype: 'button',
					iconCls: 'action',
					text: 'Imprimir',
					handler: function()
					{
						Ext.Msg.alert('', 'Se imprimió documento', function(res)
						{
							window.open("menu.html","_self");
						}, this);        			
					}
				},
				{
					xtype: 'spacer'
				}]
			}],
			items:this.listaDet
        });
		
        this.items = this.detalleDocumento;
                
        detalleDocumento.superclass.initComponent.call(this);
    }
});

Ext.reg('detalleDocumento', detalleDocumento);